<template>
  <CommonQueryLayout class="auth-access">
    <template #top>
      <QueryForm
        :form="queryFormBind"
        :form-item-list="queryFormList"
        :loading="fetchAuthListLoading"
        @query="
          () => {
            pageInfo.current = 1
            getAuthorList()
          }
        "
      />
    </template>
    <template #default>
      <TableTopControl
        title-text="账号列表"
        v-model:table-size="tableStateWrapper.tableSize"
        v-model:table-columns="tableStateWrapper.tableColumns"
        :loading="fetchAuthListLoading"
        @reload-data="getAuthorList"
      >
        <!-- <a-button type="primary">示例操作按钮</a-button> -->
      </TableTopControl>
      <a-table
        bordered
        :size="tableStateWrapper.tableSize"
        :columns="tableStateWrapper.tableColumns"
        :dataSource="tableStateWrapper.tableData"
        :row-selection="rowSelection"
        :pagination="false"
        :loading="fetchAuthListLoading"
        rowKey="id"
      >
        <template #options="{ record }">
          <template v-if="record.status === AuditStatus.ACCESS">
            <a-popconfirm
              title="确定再签约吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="contract(record.id)"
            >
              <a-button
                size="small"
                type="primary"
                :loading="updateAuthorStatusLoading"
                :disabled="record.source !== Source.PLUS"
                v-if="record.contractStatus === ContractStatus.UNCONTRACT"
                >再签约</a-button
              >
            </a-popconfirm>
            <a-popconfirm
              title="确定解约吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="unContract(record.id)"
            >
              <a-button
                size="small"
                type="primary"
                danger
                :loading="updateAuthorStatusLoading"
                :disabled="record.source !== Source.PLUS"
                v-if="record.contractStatus === ContractStatus.NORMAL"
              >
                解约
              </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
      <div class="auth-access__page-wrapper">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :show-total="formatTotalPageText"
          v-model:current="pageInfo.current"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @change="pageChange"
          @showSizeChange="pageSizeChange"
        />
      </div>
    </template>
  </CommonQueryLayout>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

import {
  ContractStatus,
  AuditStatus,
  Source,
} from '@/api/audit/auth/model/authorModel'

import useSearchAuthor from './hooks/useSearchAuthor'
import useAuditAuthor from './hooks/useAuditAuthor'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { TableTopControl } from '@/components/TopControl'
import { QueryForm } from '@/components/Form'

const {
  queryFormBind,
  queryFormList,
  fetchAuthListLoading,
  getAuthorList,
  tableStateWrapper,
  rowSelection,
  pageInfo,
  pageChange,
  pageSizeChange,
  formatTotalPageText,
} = useSearchAuthor()

const { updateAuthorStatusLoading, unContract, contract } =
  useAuditAuthor(getAuthorList)

onMounted(async () => {
  await getAuthorList()
})
</script>

<style lang="scss" scoped>
@include b(auth-access) {
  @include e(page-wrapper) {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }
}
</style>
